<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

	<ui:define name="body">

		<rich:modalPanel id="editionPopup" resizeable="false" width="500">
			<h:panelGrid columns="1" width="100%">
				<h:panelGrid columns="1" width="100%">

					<h:form id="editionSearch" styleClass="edit">

						<rich:simpleTogglePanel label="Edition search parameters"
							switchType="ajax">
							<s:decorate template="layout/display.xhtml">
								<ui:define name="label">name</ui:define>
								<h:inputText id="searchName" value="#{editionLov.searchName}" />
							</s:decorate>
						</rich:simpleTogglePanel>
						<a:commandButton id="search" value="Search"
							action="#{editionLov.find}" reRender="searchResults" />

					</h:form>
					<a:outputPanel id="searchResults" width="100%">
						<h:dataTable id="resultList" value="#{resultList}"
							var="selectEdition" width="100%">
							<h:column>
								<f:facet name="header">Edition</f:facet>
            						#{selectEdition.name}
        						</h:column>
							<h:column>
								<f:facet name="header">Action</f:facet>
								<s:button value="Select" id="select"
									action="#{cardHome.setEdition(selectEdition)}" />
							</h:column>
						</h:dataTable>
					</a:outputPanel>
				</h:panelGrid>


				<h:commandButton value="Close"
					onclick="Richfaces.hideModalPanel('editionPopup')" />
			</h:panelGrid>
		</rich:modalPanel>

		<h:form id="card" styleClass="edit" enctype="multipart/form-data">

			<rich:panel>
				<f:facet name="header">#{cardHome.managed ? 'Edit' : 'Add'} Card</f:facet>

				<rich:tabPanel style=" width : 100%; " switchType="client">
					<rich:tab id="cardData" style="width: 100%; "
						label="#{cardHome.instance.cardName}" styleClass="tab">

						<h:panelGrid columns="1" style="width: 100%; " cellpadding="2px"
							cellspacing="2px">
							<h:panelGrid columns="2" columnClasses="cardData, cardPicture"
								style=" width : 100%; " cellpadding="2px" cellspacing="2px">
								<rich:panel style="width : 100%; ">
									<f:facet name="header">
										<h:outputText rendered="#{not cardHome.managed}" value="New"
											styleClass="header" />
										<h:outputText rendered="#{cardHome.managed}"
											value="#{cardHome.instance.cardName}" styleClass="header" />
									</f:facet>
									<h:panelGrid columns="2" style="width : 100%; "
										cellpadding="2px" cellspacing="2px">

										<s:decorate id="cardNameDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Card name</ui:define>
											<h:inputText id="cardName" size="20" maxlength="150"
												value="#{cardHome.instance.cardName}">
												<a:support event="onblur" reRender="cardNameDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="editionDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Edition</ui:define>
											<h:inputText id="edition" disabled="true" readonly="true"
												value="#{cardHome.instance.edition.name}">
											</h:inputText>
											<h:graphicImage value="img/lovButton.gif"
												onclick="Richfaces.showModalPanel('editionPopup', {})"></h:graphicImage>
										</s:decorate>

										<s:decorate id="rarityDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Rarity</ui:define>
											<h:inputText id="rarity" size="20" maxlength="4"
												value="#{cardHome.instance.rarity}">
												<a:support event="onblur" reRender="rarityDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<!-- s:decorate id="colorDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Color</ui:define>
											<h:inputText id="color" size="20" maxlength="10"
												value="#{cardHome.instance.color}">
												<a:support event="onblur" reRender="colorDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate -->

                                        <s:decorate id="colorDecoration" template="layout/edit.xhtml">
                                            <ui:define name="label">Color</ui:define>
                                            <h:selectOneMenu value="#{cardHome.instance.color}">
                                                <s:selectItems value="#{enumLists.colorArray}" var="color"
                                                    label="#{color.description}" />
                                            </h:selectOneMenu>
                                        </s:decorate>

										<s:decorate id="costDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Cost</ui:define>
											<h:inputText id="cost" size="20" maxlength="50"
												value="#{cardHome.instance.cost}">
												<a:support event="onblur" reRender="costDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="typeDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Type</ui:define>
											<h:inputText id="type" size="20" maxlength="45"
												value="#{cardHome.instance.type}">
												<a:support event="onblur" reRender="typeDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="textDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Text</ui:define>
											<h:inputTextarea value="#{cardHome.instance.text}" id="text"
												cols="20" rows="4">
												<a:support event="onblur" reRender="textDecoration"
													bypassUpdates="true" />
											</h:inputTextarea>
										</s:decorate>

										<s:decorate id="flavorDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Flavor</ui:define>
											<h:inputTextarea value="#{cardHome.instance.flavor}"
												id="flavor" cols="20" rows="4">
												<a:support event="onblur" reRender="flavorDecoration"
													bypassUpdates="true" />
											</h:inputTextarea>
										</s:decorate>

										<s:decorate id="powerToughnessDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Power Toughness</ui:define>
											<h:inputText id="powerToughness" size="20" maxlength="10"
												value="#{cardHome.instance.powerToughness}">
												<a:support event="onblur"
													reRender="powerToughnessDecoration" bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="artistDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Artist</ui:define>
											<h:inputText id="artist" size="20" maxlength="45"
												value="#{cardHome.instance.artist}">
												<a:support event="onblur" reRender="artistDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="collectorNumberDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Collector Number</ui:define>
											<h:inputText id="collectorNumber" size="20" maxlength="6"
												value="#{cardHome.instance.collectorNumber}">
												<a:support event="onblur"
													reRender="collectorNumberDecoration" bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<!-- s:decorate id="foilDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Foil</ui:define>
											<h:inputText id="foil" size="20" maxlength="2"
												value="#{cardHome.instance.foil}">
												<a:support event="onblur" reRender="foilDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate -->

										<s:decorate id="foilDecoration" template="layout/edit.xhtml">
											<ui:define name="label">Foil</ui:define>
											<h:selectOneMenu value="#{cardHome.instance.foil}">
												<s:selectItems value="#{enumLists.foilArray}" var="foil"
													label="#{foil.description}" />
											</h:selectOneMenu>
										</s:decorate>


									</h:panelGrid>
								</rich:panel>

								<rich:panel>
									<f:facet name="header">
										<h:outputText value="#{cardHome.instance.cardName}"
											styleClass="header" />
									</f:facet>
									<rich:panel rendered="#{!empty cardHome.instance.picture}">
										<s:graphicImage value="#{cardHome.instance.picture}" />
									</rich:panel>
									<rich:panel rendered="#{empty cardHome.instance.picture}">
										<h:graphicImage value="/img/no_pic.jpg" />
									</rich:panel>
								</rich:panel>
							</h:panelGrid>
						</h:panelGrid>
					</rich:tab>
				</rich:tabPanel>
			</rich:panel>
			<div class="actionButtons"><h:commandButton id="save"
				value="Save" action="#{cardHome.persist}"
				disabled="#{!cardHome.wired}" rendered="#{!cardHome.managed}" /> <h:commandButton
				id="update" value="Save" action="#{cardHome.update}"
				rendered="#{cardHome.managed}" /> <h:commandButton id="delete"
				value="Delete" action="#{cardHome.remove}"
				rendered="#{cardHome.managed}" /> <s:button id="done" value="Done"
				propagation="end" view="/Card.xhtml" rendered="#{cardHome.managed}" />
			<s:button id="cancel" value="Cancel" propagation="end"
				view="/#{empty cardFrom ? 'CardList' : cardFrom}.xhtml"
				rendered="#{!cardHome.managed}" /></div>
		</h:form>



	</ui:define>

</ui:composition>
